{% extends "index/main.html" -%}
{% block css -%}
<style type="text/css">
.div-fixed {
	width: 100%;
	height: 30rem;
	overflow: auto;
}

.div-fixed .table {
	table-layout: fixed;
}

.div-fixed .table thead tr th {
	position: sticky;
	width: 20rem;
	top: -1px;
}

.div-fixed .table thead tr th:last-child,
.div-fixed .table tbody tr td:last-child {
	position: sticky;
	right: -1px;
	z-index: 1;
	background-color: #fff;
}

.div-fixed .table thead tr th:last-child {
	z-index: 2;
	background-color: lightblue;
}
</style>
{% endblock css -%}
{% block content -%}
<div class="box-content">
	<form id="tab_form" method="post" action="{{ctx}}/users/exportUser.html" class="group-form" style="width: 100rem;">
		<div class="group-label">姓名</div>
		<div class="group-content">
			<input type="text" name="name">
		</div>
		<div class="group-label">人员状态</div>
		<div class="group-content">
			<select name="statu" class="sel">
				<option value=""></option>
				{% for val in status -%}
				<option value="{{val}}">{{val}}</option>
				{% endfor -%}
			</select>
		</div>
		<div class="group-content">
			<button type="button" onclick="query('tab', 1)" class="btn bg-royal">查询</button>
			{% if has_btn(btn="editUser", userId=userId) -%}
			<button type="button" onclick="editUser('')" class="btn bg-royal ml20">添加</button>
			{% endif -%}
			{% if has_btn(btn="printUser", userId=userId) -%}
			<a href="{{ctx}}/users/printUser.html" class="btn bg-royal ml20">打印</a>
			{% endif -%}
			{% if has_btn(btn="exportUser", userId=userId) -%}
			<button type="submit" class="btn bg-royal ml20">导出</button>
			{% endif -%}
		</div>
	</form>
	<div class="div-fixed">
		<table id="tab" url="{{ctx}}/users/userData.html" data="{'orderBy':'id desc'}" class="table table-border table-responsive table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th field="department">部门</th>
					<th field="job">职务</th>
					<th field="name">姓名</th>
					<th field="gender">性别</th>
					<th field="birthday">出生年月</th>
					<th field="identity">身份证号</th>
					<th field="telephone">联系方式</th>
					<th field="education">文化程度</th>
					<th field="username">用户名</th>
					<th field="passwords">密码</th>
					<th field="hiredate">入职时间</th>
					<th field="leavedate">离职时间</th>
					<th render="empty">销售业绩</th>
					<th render="empty">业绩排名</th>
					<th render="empty">工资总额</th>
					<th field="statu">人员状态</th>
					<th render="opt">操作</th>
				</tr>
			</thead>
		</table>
	</div>
</div>
<div id="tab_page"></div>
<script type="text/javascript">
	ice(function() {
		query('tab', 1);
	});

	function empty(json) {
		return '';
	}

	function opt(json) {
		var url = '';
		if (bool('{{has_btn(btn="editUser", userId=userId)}}')) {
			url += '<button type="button" onclick="editUser('+json.id+')" class="btn bg-royal">编辑</button>';
		}
		if (bool('{{has_btn(btn="authorUsers", userId=userId)}}')) {
			url += '<a href="{{ctx}}/users/authorization.html?id='+json.id+'" class="btn bg-royal ml20">权限配置</a>';
		}
		return url;
	}

	function editUser(id) {
		location.href = '{{ctx}}/users/editUser.html?id=' + id;
	}
</script>
{% endblock content -%}
